/**
 * Created by Ysssssss on 2021/4/15.
 */


import React, {useCallback, useState, useContext, forwardRef, useEffect, useRef} from 'react'
import {useSelector, useDispatch} from "react-redux";
import CustomizeModal, {CustomizeModalButton, CustomizeModalContext} from "@common/presentational/CustomizeModal";
import {Select, Row, Input, Col, Divider} from "antd";
import {createProductType, editProductType, getProductTypeSelection} from "@sagas/productCenter";
import notify from "@utils/tip";
import BilinIcon from "@common/presentational/BilinIcon";

const CreateProductTypeContent = props => {
    const { productNature, callback } = props
    const { hide } = useContext(CustomizeModalContext)
    const { productTypeSelection } = useSelector(state => state.productCenter)
    const dispatch = useDispatch()
    const createLevelOneProductTypeModal = useRef()
    const [ {
        productTypeId,
        subProductTypeName
    }, setProductType ] = useState({ productTypeId : '', subProductTypeName: '' })

    useEffect(() => {
        dispatch(getProductTypeSelection({ productNature }))
    }, [])

    const handleProductTypeIdChange = value => {
        setProductType({
            productTypeId: value,
            subProductTypeName,
        })
    }

    const createCallback = id => {
        dispatch(getProductTypeSelection({ productNature }, () => {
            handleProductTypeIdChange(id)
            callback && callback()
        }))
    }

    const handleSubProductTypeNameChange = e => {
        setProductType({
            productTypeId,
            subProductTypeName: e.currentTarget.value,
        })
    }

    const submitProductType = () => {
        if (!productTypeId) {
            notify('请选择一级类目')
            return;
        }
        if (!subProductTypeName) {
            notify('请输入二级类目名称')
            return;
        }
        dispatch(createProductType({
            name: subProductTypeName,
            parentId: productTypeId,
            productNature
        }, () => {
            callback && callback()
            hide()
        }))
    }
    const showCreateModal = useCallback(() => {
        createLevelOneProductTypeModal.current?.show()
    }, [])

    return (
        <>
            <Row className="modal-line">
                <Col span={6}>一级类目</Col>
                <Col span={18}>
                    <Select onChange={handleProductTypeIdChange}
                            value={productTypeId}
                            dropdownRender={menu => (
                                <div>
                                    {menu}
                                    <Divider style={{ margin: '4px 0' }} />
                                    <div className="pd-8 flex-vertical-center cur-poi ft-14 clr-green"
                                         onClick={showCreateModal}
                                    >
                                        <BilinIcon type="plus"/>
                                        <span className="mgl-16">创建</span>
                                    </div>
                                </div>
                            )}
                    >
                        { productTypeSelection.map(productType => (
                            <Select.Option
                                key={productType.id}
                                value={productType.id}
                            >
                                { productType.name }
                            </Select.Option>
                        ))}
                    </Select>
                </Col>
            </Row>
            <Row className="modal-line">
                <Col span={6}>二级类目</Col>
                <Col span={18}>
                    <Input onChange={handleSubProductTypeNameChange}
                           value={subProductTypeName}
                           disabled={!productTypeId}
                    />
                </Col>
            </Row>
            <CustomizeModalButton
                onOk={submitProductType}
                onCancel={hide}
            />
            <CreateLevelOneProductType ref={createLevelOneProductTypeModal} productNature={productNature} callback={createCallback}/>
        </>
    )
}

const SingleProductTypeEdit = props => {
    const { productNature, callback } = props
    const { hide, params } = useContext(CustomizeModalContext)
    const { id, name: initName = '', parentId } = params
    const dispatch = useDispatch()
    const [name, setName] = useState(initName)

    const handleNameChange = useCallback(e => {
        setName(e.currentTarget.value)
    }, [])

    const submitProductType = () => {
        if (!name) {
            notify('请输入名称')
            return;
        }
        if (id) {
            dispatch(editProductType({
                id,
                name,
                parentId
            }, (id) => {
                callback && callback(id)
                hide()
            }))
        } else {
            dispatch(createProductType({
                name,
                parentId,
                productNature
            }, (id) => {
                callback && callback(id)
                hide()
            }))
        }
    }
    return (
        <>
            <Row className="modal-line">
                <Col span={6}>名称</Col>
                <Col span={18}>
                    <Input onChange={handleNameChange}
                           value={name}
                    />
                </Col>
            </Row>
            <CustomizeModalButton
                onOk={submitProductType}
                onCancel={hide}
            />
        </>
    )
}

export const CreateProductType = forwardRef((props, ref) => (
    <CustomizeModal title="新建分类" ref={ref}>
        <CreateProductTypeContent {...props}/>
    </CustomizeModal>
))
export const EditProductType = forwardRef((props, ref) => (
    <CustomizeModal title="编辑分类" ref={ref}>
        <SingleProductTypeEdit {...props}/>
    </CustomizeModal>
))

export const CreateLevelOneProductType = forwardRef((props, ref) => (
    <CustomizeModal title="创建一级分类" ref={ref}>
        <SingleProductTypeEdit {...props}/>
    </CustomizeModal>
))

export const CreateLevelTwoProductType = forwardRef((props, ref) => (
    <CustomizeModal title="创建二级分类" ref={ref}>
        <SingleProductTypeEdit {...props}/>
    </CustomizeModal>
))